<template>
  <div class='container'>
    <el-dialog :title="title" :visible="isShow" @close="showClose" width="400px">
  <el-form  label-width="80px" :model="formModel" ref="formDm" :rules="rules">
    <el-form-item label="学科名称" prop="subjectName">
      <el-input placeholder="请输入学科名称" v-model="formModel.subjectName" ></el-input>
  </el-form-item>
    <el-form-item label="显示开关">
      <el-switch style="font-color:#000" :active-value="1" :inactive-value="0" v-model="formModel.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949"  >
    </el-switch>
    </el-form-item>
  </el-form>
  <div slot="footer" class="right">
    <el-button size="small"  @click="showClose" >取消</el-button>
    <el-button size="small" type="primary" @click="upDateFn">确定</el-button>
  </div>

</el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects'

export default {
  props: {
    Id: {
      type: Number
    }
  },
  data () {
    return {
      isShow: false,
      title: '',
      value: true,
      formModel: {
        subjectName: '',
        isFrontDisplay: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '记得要输入内容哦', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 关闭弹窗
    showClose () {
      this.isShow = false
      this.$refs.formDm.resetFields()
    },
    // 增加数据
    upDateFn () {
      this.$refs.formDm.validate(async (valr) => {
        if (!valr) return
        if (this.Id) {
          // console.log('这是修改', this.Id)
          await update({ ...this.formModel, id: this.Id })
        } else {
          await add(this.formModel)
          this.$message.success('新增成功')
        }
        this.showClose()
        this.$emit('updateadd')
        // console.log(res)
        // 发请求修改内容
      })
    }
  }
}
</script>

<style scoped lang='scss'>
 .right{
   display: flex;
   justify-content: flex-end;
 }

 </style>
